<template>
    <view class="card">
      <view class="u-flex u-border-bottom u-p-t-30  u-p-b-30" @click="showTimePicker=true">
        <view>开播时间 <text>*</text></view>
        <view class="u-flex-1 u-text-right u-p-r-10">
          <view v-if="liveTime">{{liveTime}}</view>
          <view v-else class="garyText">请选择</view>
        </view>
        <u-icon name="arrow-right" color="#AAAAAA"></u-icon>
      </view>
      <view class="u-flex u-border-bottom  u-p-t-30  u-p-b-30" @click="showPreTimePicker=true">
        <view>预告提醒时间 <text>*</text></view>
        <view class="u-flex-1 u-text-right u-p-r-10">
          <view v-if="preTime">
            <text v-if="timeType==1" class="everyDays">不重复</text>
            <text v-if="timeType==3" class="everyDays">每天</text>
            <text v-if="timeType==2" class="everyDays">{{everyDays}}</text>
          {{preTime}}</view>
          <view v-else class="garyText">请选择</view>
        </view>
        <u-icon name="arrow-right" color="#AAAAAA"></u-icon>
      </view>
      <view class="  u-p-t-30">预告内容</view>
      <view class="u-m-t-10 textBox">
        <textarea :value="textarea" placeholder="" :maxlength="10" class="textarea" />
        <view class="numbers">{{textarea.length}}/10</view>
      </view>
      <view class="btns" v-if="from=='add'">
        保存并修改
      </view>
      <view class="u-flex" v-else>
        <view class="btns">
        保存并修改
      </view>
      <view class="delBOx">
         <image src="../../../static/home/del1@2x.png" mode=""></image>
      </view>
      </view>
    </view>
  <!-- 时间选择弹窗 -->
  <u-popup :show="showTimePicker" :round="10" mode="bottom" @close="closetimepicker" closeable>
    <view>
      <view class="u-text-center u-p-t-30  u-p-b-30">选择开播时间</view>
      <view style="margin-top: 50rpx">
        <h-picker-liveTime :showValue="false" @confirm="timeVerify"
          :value="formatDate(Date.now(), 'YYYY-MM-DD HH:mm')"></h-picker-liveTime>
      </view>
    </view>
  </u-popup>
  <u-popup :show="showPreTimePicker" :round="10" mode="bottom" @close="closetimepicker" closeable>
    <view>
      <view class="u-text-center u-p-t-30  u-p-b-30">预告提醒时间</view>
      <view style="margin-top: 50rpx">
        <h-picker-livePreTime :showValue="false" @changeTime="yyTimeChange"
          :value="formatDate(Date.now(), 'YYYY-MM-DD HH:mm')" v-if='timeType==2'></h-picker-livePreTime>

        <h-picker-livePreDateTime :showValue="false" @changeTime="yyTimeChange"
          :value="formatDate(Date.now(), 'YYYY-MM-DD HH:mm')" v-else> </h-picker-livePreDateTime>

      </view>
      <scroll-view scroll-x="true">
        <view class=" cateBox">
          <view  class="cateItem"  @click="selectWeek(1,'repeat',index)" :class="type=='repeat'?'active':''"> 不重复</view>
          <view class="cateItem"   @click="selectWeek(3,'everyDay',index)" :class="type=='everyDay'?'active':''"> 每天</view>
          <view v-for="(item,index) in weekList" class="cateItem" :class="item.selected?'active':''" :key="index"
            @click="selectWeek(2,item,index)">{{item.name}}</view>
        </view>
      </scroll-view>
      <view class="btnBox">
        <view class="con_btn" @click="confirmYY()">确认</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
  import { nextTick, ref, onMounted, computed, watch } from 'vue'
  import dayjs from 'dayjs'

  import {
    onLoad,
    onPullDownRefresh,
    onReachBottom,
    onUnload,
    onBackPress,
    onReady,
    onShow,
  } from '@dcloudio/uni-app'
  import {
    navigateTo,
    showToast,
    navigateBack,
    redirectTo,
    formatDate
  } from '@/utils'
  const props = defineProps({
    from: {
      type: String,
      default: '',
    },
  })
  const liveTime = ref(null) //直播时间
  const preTime = ref(null)
  const textarea = ref("") //
  const showTimePicker = ref(false)
  const showPreTimePicker = ref(false)
  const cateList = ref(['不重复', '每天'])
  const weekList = ref([{
    name: '周一',
    id: 1,
    selected: false
  }, {
    name: '周二',
    id: 2,
    selected: false
  }, {
    name: '周三',
    id: 3,
    selected: false
  }, {
    name: '周四',
    id: 4,
    selected: false
  }, {
    name: '周五',
    id: 5,
    selected: false
  }, {
    name: '周六',
    id: 6,
    selected: false
  }, {
    name: '周日',
    id: 7,
    selected: false
  }])
  const weekarr = ref([])
  const timeVerify = (data) => {
    console.log(data)
    liveTime.value = data.time
    showTimePicker.value = false

  }
  const closetimepicker = () => {
    showTimePicker.value = false
    showPreTimePicker.value=false
  }
  const yyTimeChange = (data) => {
     console.log(data)
     preTime.value = data
  }
  const timePreVerify = (date) => {
    // showPreTimePicker.value = false
  }
  const type=ref('')
  const timeType=ref(1)
  const selectWeek = (num, item, index) => {
    timeType.value=num
    if(num!=timeType.value){
      preTime.value = ''
    }
    if (num == 2) {
      type.value=''
      weekList.value[index].selected = !weekList.value[index].selected
      filterArr()
    } else {
      type.value=item
      weekList.value = weekList.value.map(v => {
        return {
          ...v,
          selected: false
        }
      })

    }
    // if(weekarr.value.includes(i))

  }
  const filterArr=()=>{
     weekarr.value= weekList.value.filter(v=>{
       return v.selected
     }).map(v=>{
       return v.name
     })
  }
  const everyDays=ref()
  const confirmYY=()=>{
    if( weekarr.value.length>0){
       everyDays.value=weekarr.value.join("/")
    }
    showPreTimePicker.value=false
  }
</script>

<style>
  page {
    background: #F5F6F8;
  }
</style>
<style scoped lang="scss">
  .pages {
    padding: 20rpx 25rpx;
  }

  .card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 0 20rpx 1rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #202020;

    text {
      color: #CB5000;
    }
    .everyDays{
      color: #202020;
      padding-right: 10rpx;
    }

    .garyText {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
    }

    .textBox {
      position: relative;

      .numbers {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #AAAAAA;
      }
    }

    .textarea {
      height: 180rpx;
      background: #F5F6F8;
      border-radius: 10rpx;
      padding: 20rpx;
      width: 100%;
      box-sizing: border-box;
    }

    .btns {
      width: 600rpx;
      line-height: 88rpx;
      background: #00C1B9;
      border-radius: 44rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
      margin: 50rpx auto;
    }
  }

  .cateBox {
    white-space: nowrap;
    padding: 20rpx 24rpx;

    .cateItem {
      display: inline-block;
      width: 130rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      border: 2rpx solid #AAAAAA;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
      margin-right: 20rpx;

      &.active {
        border: 2rpx solid #00C1B9;
        color: #00C1B9;
      }
    }
  }

  .btnBox {
    padding: 6rpx 0;

    .con_btn {
      // width: 700rpx;
      height: 88rpx;
      background: #00C1B9;
      border-radius: 44rpx;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      margin: 0 auto;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .delBOx{
    width: 88rpx;
    height: 88rpx;
    background: #F5F6F8;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
      margin-left:20rpx;
    image{
      width: 36rpx;
      height: 36rpx;
    }
  }
</style>
